SherbyNet - /page/wikibook/entry.mu

Micron Document

<!DOCTYPE html>

<title>Mode (user interface)</title>

</head>

<span id="openzim-page-title" class="mw-page-title-main"><span class="mw-page-title-main">Mode (user interface)</span></span>

</h1>

</header>

/* start https://en.wikipedia.org/ */

.mw-parser-output .hatnote{font-style:italic}.mw-parser-output div.hatnote{padding-left:1.6em;margin-bottom:0.5em}.mw-parser-output .hatnote i{font-style:normal}.mw-parser-output .hatnote+link+.hatnote{margin-top:-0.5em}@media print{body.ns-0 .mw-parser-output .hatnote{display:none!important}}

/* end https://en.wikipedia.org/ */

</style><div role="note" class="hatnote navigation-not-searchable">This article is about a transient state in user interfaces. For modes in videogames, see <a href="Game_mode" class="mw-redirect" title="Game mode">Game mode</a>. For other uses, see <a href="Mode_(disambiguation)" class="mw-redirect mw-disambig" title="Mode (disambiguation)">Mode (disambiguation)</a>.</div>

<div role="note" class="hatnote navigation-not-searchable">Not to be confused with <a href="Multimodal_interaction" title="Multimodal interaction">Multimodal interaction</a> or <a href="Modality_(human-computer_interaction)" class="mw-redirect" title="Modality (human-computer interaction)">Modality (human-computer interaction)</a>.</div>

<p>In <a href="User_interface" title="User interface">user interface</a> design, a <b>mode</b> is a distinct setting within a <a href="Computer_program" title="Computer program">computer program</a> or any physical machine <a href="Interface_(computing)" title="Interface (computing)">interface</a>, in which the same <a href="User_input" class="mw-redirect" title="User input">user input</a> will produce perceived results different from those that it would in other settings. Modal interface components include the <a href="Caps_lock" class="mw-redirect" title="Caps lock">Caps lock</a> and <a href="Insert_key" title="Insert key">Insert</a> keys on the standard <a href="Computer_keyboard" title="Computer keyboard">computer keyboard</a>, both of which typically put the user's typing into a different mode after being pressed, then return it to the regular mode after being re-pressed.

</p><p>An interface that uses no modes is known as a <i>modeless</i> interface.<sup id="cite_ref-1" class="reference"><a href="#cite_note-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup> Modeless interfaces avoid <i>mode errors</i>, in which the user performs an action appropriate to one mode while in another mode, by making it impossible for the user to commit them.<sup id="cite_ref-2" class="reference"><a href="#cite_note-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup>

</p>

<div class="mw-heading mw-heading2"><h2 id="Definition">Definition</h2></div>

<p>In his book <i><a href="The_Humane_Interface" title="The Humane Interface">The Humane Interface</a></i>, <a href="Jef_Raskin" title="Jef Raskin">Jef Raskin</a> defines modality as follows:

</p>

<p>"An human-machine interface is modal with respect to a given gesture

when (1) the current <a href="State_(computer_science)" title="State (computer science)">state</a> of the interface is not the user's locus of

attention and (2) the interface will execute one among several

different responses to the gesture, depending on the system's current

state." (Page 42).

</p>

</blockquote>

<p>In Raskin's sense and according to his definition, an interface is not modal as long as the user is fully aware of its current state. Raskin refers to this as "locus of attention" (from the <a href="Latin" title="Latin">Latin</a> word <i>locus</i> meaning "place" or "location"). Typically a user is aware of a system state if the state change was purposefully initiated by the user, or if the system gives some strong signals to notify the user of the state change in the place where interaction occurs. If the user's locus of attention changes to a different area, the state of the interface may then represent a mode since the user is no longer aware of it.

</p><p><a href="Larry_Tesler" title="Larry Tesler">Larry Tesler</a> defined modes as "a state of the user interface that lasts for a period of time, is not associated with any particular object, and has no role other than to place an interpretation on operator input."<sup id="cite_ref-3" class="reference"><a href="#cite_note-3"><span class="cite-bracket">[</span>3<span class="cite-bracket">]</span></a></sup>

</p>

<div class="mw-heading mw-heading2"><h2 id="Examples">Examples</h2></div>

<div class="mw-heading mw-heading3"><h3 id="Modal">Modal</h3></div>

/* start https://en.wikipedia.org/ */

.mw-parser-output .ambox{border:1px solid #a2a9b1;border-left:10px solid #36c;background-color:#fbfbfb;box-sizing:border-box}.mw-parser-output .ambox+link+.ambox,.mw-parser-output .ambox+link+style+.ambox,.mw-parser-output .ambox+link+link+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+style+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+link+.ambox{margin-top:-1px}html body.mediawiki .mw-parser-output .ambox.mbox-small-left{margin:4px 1em 4px 0;overflow:hidden;width:238px;border-collapse:collapse;font-size:88%;line-height:1.25em}.mw-parser-output .ambox-speedy{border-left:10px solid #b32424;background-color:#fee7e6}.mw-parser-output .ambox-delete{border-left:10px solid #b32424}.mw-parser-output .ambox-content{border-left:10px solid #f28500}.mw-parser-output .ambox-style{border-left:10px solid #fc3}.mw-parser-output .ambox-move{border-left:10px solid #9932cc}.mw-parser-output .ambox-protection{border-left:10px solid #a2a9b1}.mw-parser-output .ambox .mbox-text{border:none;padding:0.25em 0.5em;width:100%}.mw-parser-output .ambox .mbox-image{border:none;padding:2px 0 2px 0.5em;text-align:center}.mw-parser-output .ambox .mbox-imageright{border:none;padding:2px 0.5em 2px 0;text-align:center}.mw-parser-output .ambox .mbox-empty-cell{border:none;padding:0;width:1px}.mw-parser-output .ambox .mbox-image-div{width:52px}@media(min-width:720px){.mw-parser-output .ambox{margin:0 10%}}@media print{body.ns-0 .mw-parser-output .ambox{display:none!important}}

/* end https://en.wikipedia.org/ */

</style>

<p>Several examples of software have been described as <i>modal</i> or using interface modes:

</p>

<ul><li><a href="Text_editor" title="Text editor">Text editors</a> – typically are in insert mode by default but can be toggled in and out of <a href="Overtype" class="mw-redirect" title="Overtype">overtype</a> mode by pressing the <a href="Insert_key" title="Insert key">Insert key</a>.</li>

<li><a href="Bravo_(editor)" title="Bravo (editor)">Bravo (editor)</a> – the first <a href="WYSIWYG" title="WYSIWYG">WYSIWYG</a> modal editor made for <a href="Xerox_Alto" title="Xerox Alto">Xerox Alto</a> computers at <a href="Xerox_PARC" class="mw-redirect" title="Xerox PARC">Xerox PARC</a> by <a href="Butler_Lampson" title="Butler Lampson">Butler Lampson</a> and <a href="Charles_Simonyi" title="Charles Simonyi">Charles Simonyi</a></li>

<li><a href="Vi_(text_editor)" title="Vi (text editor)">vi</a> – has one mode for inserting text, and a separate mode for entering commands. There is also an "<a href="Ex_(text_editor)" title="Ex (text editor)">ex</a>" mode for issuing more complex commands (e.g. search and replace). Under normal circumstances, the editor automatically returns to the previous mode after a command has been issued; however, it is possible to permanently move into this mode using <i>Shift-Q</i>.

<ul><li>Derivatives, such as <a href="Vim_(text_editor)" title="Vim (text editor)">Vim</a> and <a href="Neovim" class="mw-redirect" title="Neovim">Neovim</a></li></ul></li>

<li><a href="Emacs" title="Emacs">Emacs</a> – has the concept of "prefix keys", which trigger a modal state by pressing the control key plus a letter key. Emacs then waits for additional keypresses that complete a <a href="Keybinding" class="mw-redirect" title="Keybinding">keybinding</a>. This differs from <i>vi</i> in that the mode always ends as soon as the command is called (when the sequence of key presses that activates it is completed). Emacs also has multiple "major and minor" modes that change the available commands, and may be automatically invoked based on file type to more easily edit files of that type. Emacs modes are not restricted to editing text files; modes exist for <a href="File_browser" class="mw-redirect" title="File browser">file browsing</a>, <a href="Web_browsing" class="mw-redirect" title="Web browsing">web browsing</a>, <a href="IRC" title="IRC">IRC</a> and <a href="Email" title="Email">email</a> and their interaction patterns are equivalent to <a href="Application_software" title="Application software">application software</a> within the Emacs environment. Modes are written in <a href="Emacs_Lisp" title="Emacs Lisp">Emacs Lisp</a>, and all modes may not be included with all versions.</li>

<li><a href="Cisco_IOS" title="Cisco IOS">Cisco IOS</a> – certain commands are executed in a "command mode".</li>

<li>Tools chosen from a <a href="Palette_(computing)" title="Palette (computing)">palette</a> in <a href="Photo_manipulation" class="mw-redirect" title="Photo manipulation">photo-editing</a> and drawing applications are examples of a modal interface. Some advanced image editors have a feature where the same tools can be accessed nonmodally by a keypress, and remain active as long as the key is held down. Releasing the key returns the interface to the modal tool activated by the palette.</li>

<li>Video games can use <a href="Game_mode" class="mw-redirect" title="Game mode">game modes</a> as a mechanic to enhance <a href="Gameplay" title="Gameplay">gameplay</a>.</li>

<li><a href="Modal_window" title="Modal window">Modal windows</a> block all <a href="Workflow" title="Workflow">workflow</a> in the top-level program until the modal window is closed.<sup id="cite_ref-java_4-0" class="reference"><a href="#cite_note-java-4"><span class="cite-bracket">[</span>4<span class="cite-bracket">]</span></a></sup></li></ul>

<div class="mw-heading mw-heading3"><h3 id="Modeless">Modeless</h3></div>

<p><a href="Larry_Tesler" title="Larry Tesler">Larry Tesler</a> at <a href="PARC_(company)" title="PARC (company)">PARC</a> devised insights for a modeless <a href="Word_processor" title="Word processor">word processor</a> from the feedback gathered from a <a href="User_test" class="mw-redirect" title="User test">user test</a> with newly-hired Sylvia Adams, where she was asked to <a href="Ad_lib" class="mw-redirect" title="Ad lib">ad lib</a> some gestures to correct proofreading marks on the digital text.<sup id="cite_ref-5" class="reference"><a href="#cite_note-5"><span class="cite-bracket">[</span>5<span class="cite-bracket">]</span></a></sup> This test convinced Tesler's manager Bill English of the problems with their previous modal interface.

</p>

<div class="mw-heading mw-heading2"><h2 id="Mode_errors">Mode errors</h2></div>

<div role="note" class="hatnote navigation-not-searchable">See also: <a href="User_error" title="User error">User error</a></div>

<p>Modes are often frowned upon in interface design because they are likely to produce <i>mode errors</i> when the user forgets what state the interface is in, performs an action that is appropriate to a different mode, and gets an unexpected and undesired response.<sup id="cite_ref-6" class="reference"><a href="#cite_note-6"><span class="cite-bracket">[</span>6<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-glossary_7-0" class="reference"><a href="#cite_note-glossary-7"><span class="cite-bracket">[</span>7<span class="cite-bracket">]</span></a></sup> A mode error can be quite startling and disorienting as the user copes with the sudden violation of their user expectations.

</p><p>Problems occur if a change in the system state happens unnoticed (initiated by the system, or by another person, such as the user who was previously using the machine), or if after some time the user forgets about the state change. Another typical problem is a sudden change of state that interrupts a user's activity, such as <a href="Focus_stealing" title="Focus stealing">focus stealing</a>. In such a situation it can easily happen that the user does some operations with the old state in mind, while the brain has not yet fully processed the signals indicating the state change.

</p>

<div class="mw-heading mw-heading3"><h3 id="Examples_of_mode_errors">Examples of mode errors</h3></div>

<ul><li>The most common source of mode errors may be the <a href="Caps_lock" class="mw-redirect" title="Caps lock">Caps Lock</a> key. Other common modes available in <a href="PC_keyboard" class="mw-redirect" title="PC keyboard">PC keyboards</a> are the other <a href="Lock_key" title="Lock key">lock keys</a>, <a href="Num_lock" class="mw-redirect" title="Num lock">Num lock</a> and <a href="Scroll_lock" class="mw-redirect" title="Scroll lock">Scroll lock</a>, and often the <a href="Insert_key" title="Insert key">Insert key</a>. <a href="Dead_key" title="Dead key">Dead keys</a> for <a href="Diacritics" class="mw-redirect" title="Diacritics">diacritics</a> also create a short-term mode, at least if they do not provide visual feedback that the next typed character will be modified. While the Lock keys on PC keyboards are designed with the intention that they be used as modal keys, the IBM PC hardware design does not require these nor any other specific keys to be modal but allows software to treat any key as modal. (The PC <a href="BIOS" title="BIOS">BIOS</a> normally implements Caps Lock, Num Lock, and Scroll Lock states, so the modality of these keys may appear intrinsic, but it is neither technically nor practically necessary to use the BIOS for keyboard I/O, and in fact most modern operating systems do not use BIOS keyboard I/O.)</li>

<li>PC users whose language is not based on the <a href="Latin_alphabet" title="Latin alphabet">Latin alphabet</a> commonly have to interact using two different <a href="Keyboard_layout" title="Keyboard layout">keyboard layouts</a>: a local one and <a href="QWERTY" title="QWERTY">QWERTY</a>. This gives rise to mode errors linked to the current keyboard layout: quite often, the synchronization of "current layout" mode between the human and the interface is lost, and text is typed in a layout which is not the intended one, producing meaningless text and confusion. Keyboard keys in user interface elements like "(y/n)" can have opposite effect if a program is translated.</li>

<li>A frequent example is the sudden appearance of a <a href="Modal_window" title="Modal window">modal</a> <a href="Alert_dialog_box" title="Alert dialog box">error dialog</a> in an application while the user is typing, which is a form of <a href="Focus_stealing" title="Focus stealing">focus stealing</a>; the user expects the typed text to be introduced into a text field, but the unexpected dialog may discard all the input, or may interpret some keystrokes (like "Y" for "yes" and "N" for "no") in a way that the user did not intend, often triggering a destructive action that cannot be <a href="Undo" title="Undo">reverted</a>. Programmers can mitigate this by implementing a short delay between the modal dialog displaying and it beginning to accept keyboard input.</li>

<li>The <a href="Unix" title="Unix">Unix</a> <a href="Text_editor" title="Text editor">text editor</a> <a href="Vi_(text_editor)" title="Vi (text editor)">vi</a> can be notoriously difficult for beginners precisely because it uses modes, and because earlier versions configured mode indication to be turned off by default.</li>

<li>In multiple computer video games, the keyboard is used both for controlling the game and typing messages. Users may forget they are in "typing mode" as they attempt to react to something sudden in the game and find the controls unresponsive (and instead their text bar full of the command keys pressed).</li></ul>

<div class="mw-heading mw-heading3"><h3 id="In_transportation_accidents">In transportation accidents</h3></div>

<ul><li>Mode confusion was part of the events that led to the loss of <a href="Air_France_Flight_447" title="Air France Flight 447">Air France Flight 447</a> in 2009, and the loss of life of 228 people. The pilots reacted to a loss of altitude by pulling on the stick, which would have been an appropriate reaction with the autopilot fully enabled, which would then have put the aircraft in a climbing configuration. However, the airplane's systems had entered a mode of lesser automation ("direct law" in Airbus terms) due to a blocked airspeed sensor, allowing the pilots to put the plane in a nose-high stall configuration, from which they did not recover.<sup id="cite_ref-8" class="reference"><a href="#cite_note-8"><span class="cite-bracket">[</span>8<span class="cite-bracket">]</span></a></sup></li>

<li>According to the <a href="National_Transportation_Safety_Board" title="National Transportation Safety Board">NTSB</a>, one of the factors contributing to the 2013 <a href="Asiana_Airlines_Flight_214" title="Asiana Airlines Flight 214">Asiana Airlines Flight 214</a> crash was <i>"the complexities of the autothrottle and autopilot flight director systems … which increased the likelihood of mode error".</i><sup id="cite_ref-9" class="reference"><a href="#cite_note-9"><span class="cite-bracket">[</span>9<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-10" class="reference"><a href="#cite_note-10"><span class="cite-bracket">[</span>10<span class="cite-bracket">]</span></a></sup></li>

<li>On January 17, 2015, the offshore supply vessel "Red7 Alliance" collided with a lock gate of the Kiel Canal in Germany, damaging it severely. An investigation concluded that the levers controlling the ship's <a href="Azimuth_thruster" title="Azimuth thruster">Azimuth thrusters</a> were not used in a way appropriate to the mode they were set to, resulting in the ship accelerating instead of coming to a stop in the lock.<sup id="cite_ref-11" class="reference"><a href="#cite_note-11"><span class="cite-bracket">[</span>11<span class="cite-bracket">]</span></a></sup></li>

<li>On August 21, 2017, the US Navy destroyer <a href="USS_John_S._McCain_(DDG-56)" title="USS John S. McCain (DDG-56)">USS John S. McCain</a> <a href="USS_John_S._McCain_and_Alnic_MC_collision" title="USS John S. McCain and Alnic MC collision">collided</a> with a commercial tanker in the Strait of Malacca, resulting in the loss of life of ten crew members. An investigation conducted by the US military concluded that immediately prior to the collision, helm and propulsion controls had been redistributed between bridge stations, and the bridge crew was not fully aware of that redistribution.<sup id="cite_ref-12" class="reference"><a href="#cite_note-12"><span class="cite-bracket">[</span>12<span class="cite-bracket">]</span></a></sup></li>

<li>On April 10, 2018, the 5000 ton supply vessel <i>VOS Stone</i> unberthed from a wind platform under construction in the Baltic Sea. The vessel's master decided to put the steering in an alternative mode to perform a test of the system. Insufficient communication with the officer of the watch led to a temporary loss of control, collision with the platform, injury to three crew members, and significant damage.<sup id="cite_ref-13" class="reference"><a href="#cite_note-13"><span class="cite-bracket">[</span>13<span class="cite-bracket">]</span></a></sup></li>

<li>On April 19, 2020, an <a href="F-35A" class="mw-redirect" title="F-35A">F-35A</a> fighter jet was destroyed in a landing mishap at <a href="Eglin_Air_Force_Base" title="Eglin Air Force Base">Eglin Air Force Base</a>. Investigations concluded that the aircraft was misconfigured with the wrong mode of <a href="Autothrottle" title="Autothrottle">autothrottle</a>, resulting in the aircraft becoming uncontrollable upon touchdown.<sup id="cite_ref-14" class="reference"><a href="#cite_note-14"><span class="cite-bracket">[</span>14<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-15" class="reference"><a href="#cite_note-15"><span class="cite-bracket">[</span>15<span class="cite-bracket">]</span></a></sup></li>

<li>On October 5, 2024, the <a href="HMNZS_Manawanui_(2019)" title="HMNZS Manawanui (2019)">New Zealand Navy hydrographic vessel <i>Manawanui</i></a> ran aground on a reef off <a href="Siumu" title="Siumu">Siumu</a>, <a href="Upolu" title="Upolu">Upolu</a>, <a href="Samoa" title="Samoa">Samoa</a>, and sank the following day. According to an official inquiry, the bridge crew failed to recognize that the ship's autopilot was enabled.<sup id="cite_ref-16" class="reference"><a href="#cite_note-16"><span class="cite-bracket">[</span>16<span class="cite-bracket">]</span></a></sup></li></ul>

<div class="mw-heading mw-heading2"><h2 id="Assessment">Assessment</h2></div>

<p>Modes are intended to grab the user's full attention and to cause them to acknowledge the content present in them, in particular when critical confirmation from the user is required.<sup id="cite_ref-context_17-0" class="reference"><a href="#cite_note-context-17"><span class="cite-bracket">[</span>17<span class="cite-bracket">]</span></a></sup> This latter use is criticised as ineffective for its intended use (protection against errors in destructive actions) due to <a href="Habituation" title="Habituation">habituation</a>. Actually making the action reversible (providing an "undo" option) is recommended instead.<sup id="cite_ref-18" class="reference"><a href="#cite_note-18"><span class="cite-bracket">[</span>18<span class="cite-bracket">]</span></a></sup> Though modes can be successful in particular usages to restrict dangerous or undesired operations, especially when the mode is actively maintained by a user as a <i>quasimode</i>.

</p><p>Modes are sometimes used to represent information pertinent to the task that do not fit well into the main visual flow.<sup id="cite_ref-context_17-1" class="reference"><a href="#cite_note-context-17"><span class="cite-bracket">[</span>17<span class="cite-bracket">]</span></a></sup> Modes can also work as well-understood conventions, such as painting tools.<sup id="cite_ref-glossary_7-1" class="reference"><a href="#cite_note-glossary-7"><span class="cite-bracket">[</span>7<span class="cite-bracket">]</span></a></sup>

</p><p>Modal proponents may argue that many common activities are modal and users adapt to them. An example of modal interaction is that of driving motor vehicles. A driver may be surprised when pressing the acceleration pedal does not accelerate the vehicle in the forward direction, most likely because the vehicle has been placed in an operating mode like park, neutral, or reverse. Modal interfaces require training and experience to avoid mode errors like these.

</p><p>Interface expert <a href="Jef_Raskin" title="Jef Raskin">Jef Raskin</a> came out strongly against modes, writing, "Modes are a significant source of errors, confusion, unnecessary restrictions, and complexity in interfaces." Later he notes, " 'It is no accident that swearing is denoted by #&%!#$&,' writes my colleague, Dr. James Winter; it is 'what a typewriter used to do when you typed numbers when the Caps Lock was engaged'." Raskin dedicated his book <i><a href="The_Humane_Interface" title="The Humane Interface">The Humane Interface</a></i> to describe the principles of a modeless interface for computers. Those principles were implemented in the <a href="Canon_Cat" title="Canon Cat">Canon Cat</a> and <a href="Archy_(software)" title="Archy (software)">Archy</a> systems.

</p><p>Some interface designers have recently taken steps to make <a href="Modal_window" title="Modal window">modal windows</a> more obvious and user friendly by darkening the background behind the window or allowing any mouse click outside of the modal window to force the window to close – a design called a <a href="Lightbox_(JavaScript)" title="Lightbox (JavaScript)">Lightbox</a><sup id="cite_ref-19" class="reference"><a href="#cite_note-19"><span class="cite-bracket">[</span>19<span class="cite-bracket">]</span></a></sup> – thus alleviating the risk of modal errors. <a href="Jakob_Nielsen_(usability_consultant)" title="Jakob Nielsen (usability consultant)">Jakob Nielsen</a> states as an advantage of modal dialogs that it improves user awareness. "When something does need fixing, it's better to make sure that the user knows about it." For this goal, the Lightbox design provides strong visual contrast of the dialog over the rest of the visuals. However, while such a method may reduce the risk of inadvertent wrong interactions, it does not solve the problem that the modal window blocks use of the application's normal features and so prevents the user from taking any action to fix the difficulty, or even from scrolling the screen to bring into view information which they need to correctly choose from the options the modal window presents, and it does nothing to alleviate the user's frustration at having blundered into a dead end from which they cannot escape without some more or less destructive consequence.

</p><p><a href="Larry_Tesler" title="Larry Tesler">Larry Tesler</a>, of <a href="Xerox_PARC" class="mw-redirect" title="Xerox PARC">Xerox PARC</a> and <a href="Apple_Computer" class="mw-redirect" title="Apple Computer">Apple Computer</a>, disliked modes sufficiently to get a personalized license plate for his car that read: "NO MODES". He used this plate on various cars from the early 1980s until his death in 2020. Along with others, he also used the phrase "Don't Mode Me In" for years as a rallying cry to eliminate or reduce modes.<sup id="cite_ref-20" class="reference"><a href="#cite_note-20"><span class="cite-bracket">[</span>20<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-21" class="reference"><a href="#cite_note-21"><span class="cite-bracket">[</span>21<span class="cite-bracket">]</span></a></sup>

</p><p>Bruce Wyman, the designer of a <a href="Multi-touch" title="Multi-touch">multi-touch</a> table for a <a href="Denver_Art_Museum" title="Denver Art Museum">Denver Art Museum</a> art exhibition<sup id="cite_ref-22" class="reference"><a href="#cite_note-22"><span class="cite-bracket">[</span>22<span class="cite-bracket">]</span></a></sup> argues that interfaces for several simultaneous users must be modeless, in order to avoid bringing any single user into focus.<sup id="cite_ref-23" class="reference"><a href="#cite_note-23"><span class="cite-bracket">[</span>23<span class="cite-bracket">]</span></a></sup>

</p>

<div class="mw-heading mw-heading2"><h2 id="Design_recommendations">Design recommendations</h2></div>

<div class="mw-heading mw-heading3"><h3 id="Avoid_when_possible">Avoid when possible</h3></div>

<p>Alternatives to modes such as the <a href="Undo" title="Undo">undo</a> command and the <a href="Recycle_bin_(computing)" class="mw-redirect" title="Recycle bin (computing)">recycle bin</a> are recommended when possible.<sup id="cite_ref-Implementation_24-0" class="reference"><a href="#cite_note-Implementation-24"><span class="cite-bracket">[</span>24<span class="cite-bracket">]</span></a></sup> HCI researcher <a href="Donald_Norman" class="mw-redirect" title="Donald Norman">Donald Norman</a> argues that the best way to avoid mode errors, in addition to clear indications of state, is helping the users to construct an accurate <a href="Mental_model" title="Mental model">mental model</a> of the system which will allow them to predict the mode accurately.<sup id="cite_ref-25" class="reference"><a href="#cite_note-25"><span class="cite-bracket">[</span>25<span class="cite-bracket">]</span></a></sup>

</p><p>This is demonstrated, for example, by some <a href="Stop_sign" title="Stop sign">stop signs</a> at road intersections. A driver may be <a href="Operant_conditioning" title="Operant conditioning">conditioned</a> by a <a href="Four-way_stop" class="mw-redirect" title="Four-way stop">four-way stop</a> <a href="Sign" title="Sign">sign</a> near his or her home to assume that similar intersections will also be four way stops. If it happens to be only two way, the driver could proceed through if he or she sees no other cars. Especially if there is an obstructed view, a car could come though and hit the first car broadside. An improved design alleviates the problem by including a small diagram showing which of the directions have a stop sign and which do not, thus improving the <a href="Situational_awareness" class="mw-redirect" title="Situational awareness">situational awareness</a> of drivers.

</p>

<div class="mw-heading mw-heading3"><h3 id="Proper_placement">Proper placement</h3></div>

<div role="note" class="hatnote navigation-not-searchable">See also: <a href="Modal_window#Recommendations" title="Modal window">Design recommendations for modal windows</a></div>

<p>Modal controls are best placed where the focus is in the task flow.<sup id="cite_ref-Implementation_24-1" class="reference"><a href="#cite_note-Implementation-24"><span class="cite-bracket">[</span>24<span class="cite-bracket">]</span></a></sup> For example, a modal window can be placed next to the <a href="Graphical_control_element_(software)" class="mw-redirect" title="Graphical control element (software)">graphical control element</a> that triggers its activation. Modal controls can be disruptive, so efforts should be made to reduce their capacity to block user work. After completing the task for which the mode was activated, or after a cancel action such as the <a href="Escape_key" class="mw-redirect" title="Escape key">Escape key</a>, returning to the previous state when a mode is dismissed will reduce the negative impact.

</p>

<div class="mw-heading mw-heading3"><h3 id="Quasimodes">Quasimodes</h3></div>

<p>In the book <i><a href="The_Humane_Interface" title="The Humane Interface">The Humane Interface</a></i>, Jef Raskin championed what he termed <i>quasimodes</i>, which are modes that are kept in place only through some constant action on the part of the user; such modes are also called <i>spring-loaded modes</i>.<sup id="cite_ref-26" class="reference"><a href="#cite_note-26"><span class="cite-bracket">[</span>26<span class="cite-bracket">]</span></a></sup> The term <i>quasimode</i> is a composite of the Latin prefix <i><a href="https://en.wiktionary.org/wiki/quasi-" class="extiw external" title="wiktionary:quasi-">quasi-</a></i> (which means <i>almost</i>, <i>to some degree</i>) and the English word "<a href="https://en.wiktionary.org/wiki/Mode" class="extiw external" title="wiktionary:Mode">mode</a>".

</p><p><a href="Modifier_key" title="Modifier key">Modifier keys</a> on the keyboard, such as the <a href="Shift_key" title="Shift key">Shift key</a>, the <a href="Alt_key" title="Alt key">Alt key</a> and the <a href="Control_key" title="Control key">Control key</a>, are all examples of a quasimodal interface.

</p><p>The application enters into that mode as long as the user is performing a conscious action, like pressing a key and keeping it pressed while invoking a command. If the sustaining action is stopped without executing a command, the application returns to a neutral status.

</p><p>The purported benefit of this technique is that the user does not have to remember the current state of the application when invoking a command: the same action will always produce the same perceived result.<sup id="cite_ref-27" class="reference"><a href="#cite_note-27"><span class="cite-bracket">[</span>27<span class="cite-bracket">]</span></a></sup> An interface that uses quasimodes only and has no full modes is still modeless according to Raskin's definition.

</p><p>The <a href="StickyKeys" class="mw-redirect" title="StickyKeys">StickyKeys</a> feature turns a quasimode into a mode by serializing keystrokes of modifier keys with normal keys, so that they do not have to be pressed simultaneously. In this case the increased possibility of a mode error is largely compensated for by the improved <a href="Accessibility" title="Accessibility">accessibility</a> for users with physical disabilities.

</p>

<ul><li><a href="Application_posture" title="Application posture">Application posture</a></li>

<li><a href="Automation_surprise" title="Automation surprise">Automation surprise</a></li>

<li><a href="Error_message" title="Error message">Error message</a></li>

<li><a href="Human_computer_interaction" class="mw-redirect" title="Human computer interaction">Human computer interaction</a></li>

<li><a href="Interaction_design" title="Interaction design">Interaction design</a></li>

<li><a href="Modal_window" title="Modal window">Modal window</a></li>

<li><a href="User_interface#Modalities_and_modes" title="User interface">Modalities and modes</a></li>

<li><a href="State_(computer_science)" title="State (computer science)">State (computer science)</a></li>

<div class="mw-heading mw-heading2"><h2 id="Notes">Notes</h2></div>

/* start https://en.wikipedia.org/ */

.mw-parser-output .reflist{margin-bottom:0.5em;list-style-type:decimal}@media screen{.mw-parser-output .reflist{font-size:90%}}.mw-parser-output .reflist .references{font-size:100%;margin-bottom:0;list-style-type:inherit}.mw-parser-output .reflist-columns-2{column-width:30em}.mw-parser-output .reflist-columns-3{column-width:25em}.mw-parser-output .reflist-columns{margin-top:0.3em}.mw-parser-output .reflist-columns ol{margin-top:0}.mw-parser-output .reflist-columns li{page-break-inside:avoid;break-inside:avoid-column}.mw-parser-output .reflist-upper-alpha{list-style-type:upper-alpha}.mw-parser-output .reflist-upper-roman{list-style-type:upper-roman}.mw-parser-output .reflist-lower-alpha{list-style-type:lower-alpha}.mw-parser-output .reflist-lower-greek{list-style-type:lower-greek}.mw-parser-output .reflist-lower-roman{list-style-type:lower-roman}

/* end https://en.wikipedia.org/ */

</style><div class="reflist">

<li id="cite_note-1"><span class="mw-cite-backlink"><b><a href="#cite_ref-1">^</a></b></span> <span class="reference-text"><a rel="nofollow" class="external text" href="http://www.usabilityfirst.com/glossary/term_321.txl">Usability Glossary: modeless</a> <a rel="nofollow" class="external text" href="https://web.archive.org/web/20071022205105/http://www.usabilityfirst.com/glossary/term_321.txl">Archived</a> 2007-10-22 at the <a href="Wayback_Machine" title="Wayback Machine">Wayback Machine</a></span>

</li>

<li id="cite_note-2"><span class="mw-cite-backlink"><b><a href="#cite_ref-2">^</a></b></span> <span class="reference-text"><a rel="nofollow" class="external text" href="http://www.usabilityfirst.com/glossary/mode-error/">Usability Glossary: mode error</a></span>

</li>

/* start https://en.wikipedia.org/ */

.mw-parser-output cite.citation{font-style:inherit;word-wrap:break-word}.mw-parser-output .citation q{quotes:"\"""\"""'""'"}.mw-parser-output .citation:target{background-color:rgba(0,127,255,0.133)}.mw-parser-output .id-lock-free.id-lock-free a{background:url("./mw/Lock-green.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-limited.id-lock-limited a,.mw-parser-output .id-lock-registration.id-lock-registration a{background:url("./mw/Lock-gray-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-subscription.id-lock-subscription a{background:url("./mw/Lock-red-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .cs1-ws-icon a{background:url("./mw/Wikisource-logo.svg")right 0.1em center/12px no-repeat}body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-free a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-limited a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-registration a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-subscription a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .cs1-ws-icon a{background-size:contain;padding:0 1em 0 0}.mw-parser-output .cs1-code{color:inherit;background:inherit;border:none;padding:inherit}.mw-parser-output .cs1-hidden-error{display:none;color:var(--color-error,#d33)}.mw-parser-output .cs1-visible-error{color:var(--color-error,#d33)}.mw-parser-output .cs1-maint{display:none;color:#085;margin-left:0.3em}.mw-parser-output .cs1-kern-left{padding-left:0.2em}.mw-parser-output .cs1-kern-right{padding-right:0.2em}.mw-parser-output .citation .mw-selflink{font-weight:inherit}@media screen{.mw-parser-output .cs1-format{font-size:95%}html.skin-theme-clientpref-night .mw-parser-output .cs1-maint{color:#18911f}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .cs1-maint{color:#18911f}}

/* end https://en.wikipedia.org/ */

</style><cite id="CITEREFTesler2012" class="citation journal cs1">Tesler, Larry (2012-07-01). "A personal history of modeless text editing and cut/copy-paste". <i>Interactions</i>. <b>19</b> (4): <span class="nowrap">70–</span>75. <a href="Doi_(identifier)" class="mw-redirect" title="Doi (identifier)">doi</a>:<a rel="nofollow" class="external text" href="https://doi.org/10.1145%2F2212877.2212896">10.1145/2212877.2212896</a>. <a href="S2CID_(identifier)" class="mw-redirect" title="S2CID (identifier)">S2CID</a> <a rel="nofollow" class="external text" href="https://api.semanticscholar.org/CorpusID:21399421">21399421</a>.</cite> (<a rel="nofollow" class="external text" href="http://worrydream.com/refs/Tesler%20-%20A%20Personal%20History%20of%20Modeless%20Text%20Editing%20and%20Cut-Copy-Paste.pdf">pdf</a>)</span>

</li>

<li id="cite_note-java-4"><span class="mw-cite-backlink"><b><a href="#cite_ref-java_4-0">^</a></b></span> <span class="reference-text"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="http://download.oracle.com/javase/tutorial/uiswing/misc/modality.html">"How to Use Modality in Dialogs"</a>. <a href="Oracle_Corporation" title="Oracle Corporation">Oracle Corporation</a>.</cite></span>

</li>

<li id="cite_note-5"><span class="mw-cite-backlink"><b><a href="#cite_ref-5">^</a></b></span> <span class="reference-text"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://spectrum.ieee.org/of-modes-and-men">"Of Modes and Men"</a>. <i>IEEE Spectrum: Technology, Engineering, and Science News</i>. August 2005<span class="reference-accessdate">. Retrieved <span class="nowrap">2020-02-21</span></span>.</cite></span>

</li>

<li id="cite_note-6"><span class="mw-cite-backlink"><b><a href="#cite_ref-6">^</a></b></span> <span class="reference-text"><a rel="nofollow" class="external text" href="http://www.usabilityfirst.com/glossary/mode-error/">Glossary: mode error</a></span>

</li>

<li id="cite_note-glossary-7"><span class="mw-cite-backlink">^ <a href="#cite_ref-glossary_7-0"><sup><i><b>a</b></i></sup></a> <a href="#cite_ref-glossary_7-1"><sup><i><b>b</b></i></sup></a></span> <span class="reference-text"><a rel="nofollow" class="external text" href="http://www.usabilityfirst.com/glossary/modal">Usability Glossary: modal</a></span>

</li>

<li id="cite_note-8"><span class="mw-cite-backlink"><b><a href="#cite_ref-8">^</a></b></span> <span class="reference-text"><a rel="nofollow" class="external text" href="https://arstechnica.com/information-technology/2017/11/uss-mccain-collision-ultimately-caused-by-ui-confusion/">BEA final report on the loss of Air France 447</a></span>

</li>

<li id="cite_note-9"><span class="mw-cite-backlink"><b><a href="#cite_ref-9">^</a></b></span> <span class="reference-text"><a rel="nofollow" class="external text" href="https://web.archive.org/web/20140625051127/http://www.ntsb.gov/news/events/2014/asiana214/abstract.html">National Transportation Safety Board</a> </span>

</li>

<li id="cite_note-10"><span class="mw-cite-backlink"><b><a href="#cite_ref-10">^</a></b></span> <span class="reference-text"><a rel="nofollow" class="external text" href="http://blog.martindoms.com/2011/01/24/poor-ui-design-can-kill/">Poor UI design can kill</a></span>

</li>

<li id="cite_note-11"><span class="mw-cite-backlink"><b><a href="#cite_ref-11">^</a></b></span> <span class="reference-text"><a rel="nofollow" class="external text" href="https://www.bsu-bund.de/SharedDocs/pdf/DE/Unfallberichte/2016/Untersuchungsbericht_16_15.pdf?__blob=publicationFile&v=5">M/V Red7 Alliance investigation report</a> (in German)</span>

</li>

<li id="cite_note-12"><span class="mw-cite-backlink"><b><a href="#cite_ref-12">^</a></b></span> <span class="reference-text"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://arstechnica.com/information-technology/2017/11/uss-mccain-collision-ultimately-caused-by-ui-confusion/">"USS McCain collision ultimately caused by UI confusion"</a>. 2017.</cite></span>

</li>

<li id="cite_note-13"><span class="mw-cite-backlink"><b><a href="#cite_ref-13">^</a></b></span> <span class="reference-text"><a rel="nofollow" class="external text" href="https://www.bsu-bund.de/SharedDocs/pdf/EN/Investigation_Report/2019/Investigation_Report_118_18.pdf?__blob=publicationFile&v=1">Investigation Report 118/18</a>, Federal Bureau of Maritime Casualty Investigation (Germany), April 10, 2019</span>

</li>

<li id="cite_note-14"><span class="mw-cite-backlink"><b><a href="#cite_ref-14">^</a></b></span> <span class="reference-text"><a rel="nofollow" class="external text" href="https://web.archive.org/web/20201012024653/https://www.afjag.af.mil/Portals/77/AIB-Reports/2020/May/Eglin%20AFB%20F35A%20AIB%20Report_Signed.pdf">US Air Force accident report</a></span>

</li>

<li id="cite_note-15"><span class="mw-cite-backlink"><b><a href="#cite_ref-15">^</a></b></span> <span class="reference-text"><a rel="nofollow" class="external text" href="https://www.youtube.com/watch?v=sof1k5DsIrs">F-35A Crash at Eglin AFB</a>, C.W. Lemoine, Youtube</span>

</li>

<li id="cite_note-16"><span class="mw-cite-backlink"><b><a href="#cite_ref-16">^</a></b></span> <span class="reference-text"><a rel="nofollow" class="external text" href="https://apnews.com/article/zealand-navy-ship-samoa-manawanui-sinking-military-dd9cccaa0739ef98f615cc4969a117b0">Crew mistakes caused the sinking of a New Zealand navy ship off Samoan coast, inquiry finds</a>, Charlotte Graham-McLay, AP News, November 29, 2024</span>

</li>

<li id="cite_note-context-17"><span class="mw-cite-backlink">^ <a href="#cite_ref-context_17-0"><sup><i><b>a</b></i></sup></a> <a href="#cite_ref-context_17-1"><sup><i><b>b</b></i></sup></a></span> <span class="reference-text"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://web.archive.org/web/20130506101851/http://quince.infragistics.com/Patterns/Modal%20Panel.aspx#Context">"Modal Panel - Context"</a>. <i>Infragistics.com</i>. Archived from <a rel="nofollow" class="external text" href="http://quince.infragistics.com/Patterns/Modal%20Panel.aspx#Context">the original</a> on 2013-05-06.</cite></span>

</li>

<li id="cite_note-18"><span class="mw-cite-backlink"><b><a href="#cite_ref-18">^</a></b></span> <span class="reference-text"><a href="Aza_Raskin" title="Aza Raskin">Aza Raskin</a>, A List Apart: <a rel="nofollow" class="external text" href="http://www.alistapart.com/articles/neveruseawarning">Never Use a Warning When you Mean Undo</a></span>

</li>

<li id="cite_note-19"><span class="mw-cite-backlink"><b><a href="#cite_ref-19">^</a></b></span> <span class="reference-text"><cite id="CITEREFJakob_Nielsen,_Alertbox" class="citation web cs1">Jakob Nielsen, Alertbox. <a rel="nofollow" class="external text" href="http://www.useit.com/alertbox/application-design.html">"10 Best Application UIs"</a>.</cite></span>

</li>

<li id="cite_note-20"><span class="mw-cite-backlink"><b><a href="#cite_ref-20">^</a></b></span> <span class="reference-text"><a rel="nofollow" class="external text" href="http://www.mail-archive.com/lisalist@mail.maclaunch.com/msg00409.html">Origins of the Apple Human Interface</a> by Larry Tesler, Chris Espinosa</span>

</li>

<li id="cite_note-21"><span class="mw-cite-backlink"><b><a href="#cite_ref-21">^</a></b></span> <span class="reference-text"><a rel="nofollow" class="external text" href="https://web.archive.org/web/20040511051426/https://computerhistory.org/events/lectures/appleint_10281997/appleint_xscript.shtml">Origins of the Apple Human Interface - full transcript</a></span>

</li>

<li id="cite_note-22"><span class="mw-cite-backlink"><b><a href="#cite_ref-22">^</a></b></span> <span class="reference-text"><a rel="nofollow" class="external text" href="http://museumtwo.blogspot.com/2009/06/technology-for-experiences-sake-guest.html">Technology for Experience's Sake: Guest Post by Bruce Wyman</a></span>

</li>

<li id="cite_note-23"><span class="mw-cite-backlink"><b><a href="#cite_ref-23">^</a></b></span> <span class="reference-text"><a rel="nofollow" class="external text" href="http://www.ixda.org/discuss.php?post=43435#43442">Bruce Wyman's post</a> at the ixda.org mailing list</span>

</li>

<li id="cite_note-Implementation-24"><span class="mw-cite-backlink">^ <a href="#cite_ref-Implementation_24-0"><sup><i><b>a</b></i></sup></a> <a href="#cite_ref-Implementation_24-1"><sup><i><b>b</b></i></sup></a></span> <span class="reference-text"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://web.archive.org/web/20130506101851/http://quince.infragistics.com/Patterns/Modal%20Panel.aspx#Implementation">"Modal Panel - Implementation"</a>. <i>Infragistics.com]</i>. Archived from <a rel="nofollow" class="external text" href="http://quince.infragistics.com/Patterns/Modal%20Panel.aspx#Implementation">the original</a> on 2013-05-06.</cite></span>

</li>

<li id="cite_note-25"><span class="mw-cite-backlink"><b><a href="#cite_ref-25">^</a></b></span> <span class="reference-text"><cite id="CITEREFNorman1983" class="citation journal cs1">Norman, Donald A. (1983). <a rel="nofollow" class="external text" href="https://doi.org/10.1145%2F2163.358092">"Design rules based on analyses of human error"</a>. <i>Communications of the ACM</i>. <b>26</b> (4): <span class="nowrap">254–</span>258. <a href="Doi_(identifier)" class="mw-redirect" title="Doi (identifier)">doi</a>:<span class="id-lock-free" title="Freely accessible"><a rel="nofollow" class="external text" href="https://doi.org/10.1145%2F2163.358092">10.1145/2163.358092</a></span>. <a href="S2CID_(identifier)" class="mw-redirect" title="S2CID (identifier)">S2CID</a> <a rel="nofollow" class="external text" href="https://api.semanticscholar.org/CorpusID:47103252">47103252</a>.</cite></span>

</li>

<li id="cite_note-26"><span class="mw-cite-backlink"><b><a href="#cite_ref-26">^</a></b></span> <span class="reference-text"><a rel="nofollow" class="external text" href="http://www.usabilityfirst.com/glossary/spring-loaded-mode/">Usability Glossary: spring-loaded mode</a></span>

</li>

<li id="cite_note-27"><span class="mw-cite-backlink"><b><a href="#cite_ref-27">^</a></b></span> <span class="reference-text"><a rel="nofollow" class="external text" href="http://www.useit.com/alertbox/springload.html">Spring-Loaded Modes</a>, Jakob Nielsen.</span>

</li>

</ol></div></div>

<div class="mw-heading mw-heading2"><h2 id="References">References</h2></div>

<ul><li><cite id="CITEREFBuxton1995" class="citation book cs1">Buxton, William A. S. (1995). <a rel="nofollow" class="external text" href="http://dl.acm.org/citation.cfm?id=212925.212970">"Chunking and phrasing and the design of human-computer dialogues"</a>. In Baecker, Ronald M.; Grudin, Jonathan; Buxton, William A. S.; Greenberg, Saul (eds.). <i>Readings in human-computer interaction : toward the year 2000</i> (2 ed.). San Francisco, Calif.: Morgan Kaufmann. pp. <span class="nowrap">494–</span>499. <a href="ISBN_(identifier)" class="mw-redirect" title="ISBN (identifier)">ISBN</a> <bdi>978-1-55860-246-5</bdi>. acmid 212970.</cite></li></ul>

<div class="mw-heading mw-heading2"><h2 id="External_links">External links</h2></div>

<ul><li><a rel="nofollow" class="external text" href="https://web.archive.org/web/20071022205105/http://www.usabilityfirst.com/glossary/term_321.txl">Modelessness in UsabilityFirst glossary</a></li>

<li><a rel="nofollow" class="external text" href="https://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines/XHIGHIDesign/chapter_5_section_2.html#//apple_ref/doc/uid/TP30000353-DontLinkElementID_701">Modelessness in Apple's HIG guidelines</a></li>

<li><a rel="nofollow" class="external text" href="https://web.archive.org/web/20071030044836/http://www.usabilityfirst.com/glossary/main.cgi?function=display_term&term_id=655">Definition of mode error at Usability First</a></li>

<li><a rel="nofollow" class="external text" href="http://www.hcibook.com/e3/casestudy/excel-mode">An Example of a mode error in Excel</a></li>

<li>John Rushby. <a rel="nofollow" class="external text" href="http://www.csl.sri.com/papers/ress01/">Using Model Checking to Help Discover Mode Confusions and Other Automation Surprises</a>. A paper discussing an automatic method for locating mode errors.</li>

<li>Jakob Nielsen on <a rel="nofollow" class="external text" href="http://www.useit.com/alertbox/springload.html">Spring-loaded modes</a></li></ul></div><div><div class="zim-footer">

This article is issued from <a class="external text" title="Last edited on 2025-06-04" href="https://en.wikipedia.org/wiki/?title=Mode_(user_interface)&oldid=1293945323">Wikipedia</a>. The text is available under <a class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.en">Creative Commons Attribution-Share Alike 4.0</a> unless otherwise noted. Additional terms may apply for the media files.

</div>

</div></div>

</div>

</main>

</div>

</body></html>